<template>
  <section class="mobile">
    <div class="container wrap">
      <div class="info">
        <h3 class="title">移动开发</h3>

        <div class="py-2 space-x-2 space-y-2" style="--theme: #08979c">
          <span class="tag"> rem </span>
          <span class="tag"> vant </span>
          <span class="tag"> vue </span>
          <span class="tag"> 原生小程序 </span>
        </div>

        <div class="describe text-sm">
          <p class="dot">
            H5/公众号：熟练掌握 rem 布局进行移动端适配，常用组件 Vant、WeUI。
          </p>
          <p class="dot">
            小程序：熟练掌握 uniapp 进行小程序开发，常用组件 uView、ColorUI
          </p>
          <p class="dot">原生小程序开发也可以写，不多。</p>
        </div>
      </div>

      <div class="w-4/5 my-16 mx-auto pic">
        <div class="img flex justify-around">
          <img src="../assets/imgs/mb3.jpg" class="w-auto h-full rounded" />
          <img src="../assets/imgs/mb2.jpg" class="w-auto h-full rounded" />
          <img src="../assets/imgs/mb4.jpg" class="w-auto h-full rounded" />
        </div>
      </div>
    </div>
  </section>
</template>

<style lang="scss" scoped>
.mobile {
  background: linear-gradient(135deg, #5b247a, #1bcedf);
}
.pic {
  padding-top: 45%;
  position: relative;

  .img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>
